<template>
  <div class="p-5">
    <div class="card-box box mt-5">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
        mode="default" />
      <Editor style="height: 500px; overflow-y: hidden" v-model="desc" :defaultConfig="editorConfig" mode="default"
        @onCreated="handleCreated" />
    </div>
  </div>
</template>
<script setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onMounted, reactive, shallowRef, computed } from 'vue';
const editorRef = shallowRef()



const props = defineProps({
  value: {
    type: String,
  }
})

const emits = defineEmits(['update:value'])

const desc = computed({
  get() {
    return props.value
  },
  set(val) {
    emits('update:value', val)
  }
})


const toolbarConfig = {
  excludeKeys: ['insertVideo', 'uploadVideo', 'group-video']
}

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      //server必须要配置正确
      // server: env.pross + '/upload/postfile',

      server: '',

      maxFileSize: 4 * 1024 * 1024, // 1M
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: [],
      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      fieldName: 'file',
      meta: {
        //官网中把token放到了这里，但是请求的时候会看不到token
      },
      headers: {
        //所以token放这里
        token: 'Bearer ' + ''
      },
      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: false,
      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      customInsert(res, insertFn) {
        // JS 语法

        console.log('插入', res)

        // res 即服务端的返回结果
        // 从 res 中找到 url alt href ，然后插图图片
        insertFn(res[0].url)
      }
    }
  }
}


const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>
